<template>
    <!-- 添加或修改菜单对话框 -->
    <el-dialog :title="!form.id ? '新增' : '修改'"
               :close-on-click-modal="false"
               :visible.sync="visible">
        <el-form v-if="visible" ref="dataForm" :model="form" :rules="rules" size="small" label-width="80px">
            <el-form-item label="应用名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入应用名称"/>
            </el-form-item>
           
            <el-form-item label="端口号" prop="port">
                <el-input v-model.number="form.port" placeholder="请输入端口号"  v-number-input/>
            </el-form-item>
            <el-form-item label="上传目录" prop="uploadPath">
                <el-input v-model="form.uploadPath" placeholder="请输入上传目录"/>
            </el-form-item>
            <el-form-item label="部署目录" prop="deployPath">
                <el-input v-model="form.deployPath" placeholder="请输入部署目录"/>
            </el-form-item>
            <el-form-item label="备份目录" prop="backupPath">
                <el-input v-model="form.backupPath" placeholder="请输入备份目录"/>
            </el-form-item>
            <el-form-item label="部署脚本" prop="deployScript">
                <el-input v-model="form.deployScript" placeholder="请输入部署脚本" type="textarea" :rows="5"/>
            </el-form-item>
            <el-form-item label="启动脚本" prop="startScript">
                <el-input v-model="form.startScript" placeholder="请输入启动脚本" type="textarea" :rows="5"/>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="visible = false">取 消</el-button>
            <el-button size="small" type="primary" @click="dataFormSubmit">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {getDict} from '~/utils'
    import { appEdit } from "~/admin/api/server-app";

    export default {
        name: "appAdd",
        data() {
            return {
                // 遮罩层
                loading: true,
                // 是否显示弹出层
                visible: false,
                form: {
                    uuid:'',
                    name: '',
                    port: null,
                    uploadPath: '',
                    deployPath: '',
                    backupPath:'',
                    deployScript:'',
                    startScript:''
                },
                // 表单校验
                rules: {
                    name: [
                        {required: true, message: "应用名称不能为空", trigger: "blur"}
                    ],
                    port: [
                        {required: true, message: "端口号不能为空", trigger: "blur"}
                    ],
                    uploadPath: [
                        {required: true, message: "上传目录不能为空", trigger: "blur"}
                    ],
                    deployPath: [
                        {required: true, message: "部署目录不能为空", trigger: "blur"}
                    ],
                    backupPath: [
                        {required: true, message: "备份目录不能为空", trigger: "blur"}
                    ],
                    deployScript: [
                        {required: true, message: "部署脚本不能为空", trigger: "blur"}
                    ],
                    startScript: [
                        {required: true, message: "启动脚本不能为空", trigger: "blur"}
                    ],
                }
            }
        },
        created(){

        },
        methods: {
            init(isEdit, data) {

                this.visible = true
                this.$nextTick(() => {
                    if (isEdit == 'edit') {
                       
                        this.form = {
                            uuid: data.uuid,
                            name: data.name,
                            port: data.port,
                            uploadPath: data.uploadPath,
                            deployPath: data.deployPath,
                            backupPath: data.backupPath,
                            deployScript: data.deployScript,
                            startScript: data.startScript,
                        }
                    } else {
                        this.form = {
                            uuid:'',
                            name: '',
                            port: null,
                            uploadPath: '',
                            deployPath: '',
                            backupPath:'',
                            deployScript:'',
                            startScript:''
                        }
                    }
                })
            },
            // 表单提交
            dataFormSubmit() {
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        appEdit(this.form).then(data => {
                            if(data.data && data.data.code == 0){
                                this.$message.success('保存成功！');
                                this.visible = false;
                                this.$emit('refreshDataList');
                            }else{
                                this.$message.error('保存失败！');
                            } 
                        },err=>{
                            this.$message.error('保存失败！');
                        })
                    }
                })
            },
           
        }
    }
</script>
